{include file="public/header"/}
<script src="{__PUBLIC_PATH}/common/js/jquery.js?v={$version}"></script>
<script src="{__PUBLIC_PATH}/admin/pcf/global.js?v={$version}"></script>
<script src="{__ADMIN_PATH}/assets/module/colpick/js/colpick.js?v={$version}"></script>
<link rel="stylesheet" href="{__ADMIN_PATH}/assets/module/colpick/css/colpick.css?v={$version}" type="text/css"/>
<link rel="stylesheet" href="{__PUBLIC_PATH}/admin/pcf/pcfcms.css?v={$version}" type="text/css"/>
</head>
<body>
<div class="layui-form">
<div class="layui-fluid" style="padding-bottom:83px;border:0;">
<div class="layui-col-sm12">
<div class="layui-card" style="box-shadow:0 0 0 0;">
  <div class="layui-tab layui-tab-brief" id="pcfsystem">
    <ul class="layui-tab-title" style="background-color:#f2f2f2;">
        <a href="{:url('/system.water/index')}"><li class="layui-this">水印配置</li></a>
        <a href="{:url('/system.water/thumb')}"><li>缩略图配置</li></a>
    </ul>
    <div class="layui-tab-content">
		
      <div class="layui-form-item" style="margin-bottom:5px;">
        <label class="layui-form-label">水印功能</label>
        <div class="layui-input-inline default-auto">
            <input type="checkbox" lay-filter="is_mark" lay-skin="switch" lay-text="开启|关闭" {if condition="isset($config.is_mark) && $config.is_mark eq 1"}checked{/if}>
            <input type="hidden" name="is_mark" value="{$config.is_mark|default='0'}"/>
        </div>
      </div>
	  <div class="layui-form-item">
	   <label class="layui-form-label"></label>
	   <div class="layui-input-inline auto gray" style="color:#009688;">全站图片添加水印</div>
	  </div>
	  
      <div class="layui-form-item">
        <label class="layui-form-label">水印类型</label>
        <div class="layui-input-inline">
           <input type="radio" name="mark_type" lay-filter="mark_type" value="text" title="文字" {if condition="isset($config.mark_type) && $config.mark_type eq 'text'"}checked{/if}>
           <input type="radio" name="mark_type" lay-filter="mark_type" value="img" title="图片" {if condition="isset($config.mark_type) && $config.mark_type eq 'img'"}checked{/if}>
        </div>
      </div>
	  
      <div class="layui-form-item" style="margin-bottom:5px;">
        <label class="layui-form-label">水印条件</label>
        <div class="layui-input-inline default-auto">
            <input onKeyUp="this.value=this.value.replace(/[^\d]/g,'')" onpaste="this.value=this.value.replace(/[^\d]/g,'')" pattern="^\d{1,}$" style="width:100px;float:left" type="text" name="mark_width" lay-verify="number" value="{$config.mark_width|default=''}" class="layui-input"> <span style="float:left;line-height:38px;margin-left:4px;">宽度 单位像素(px)</span>
        </div>
        <div class="layui-input-inline default-auto">
            <input onKeyUp="this.value=this.value.replace(/[^\d]/g,'')" onpaste="this.value=this.value.replace(/[^\d]/g,'')" pattern="^\d{1,}$" style="width:100px;float:left" type="text" name="mark_height" lay-verify="number" value="{$config.mark_height|default=''}" class="layui-input"> <span style="float:left;line-height:38px;margin-left:4px;">高度 单位像素(px)</span>
        </div>
      </div>
	  <div class="layui-form-item">
	   <label class="layui-form-label"></label>
	   <div class="layui-input-block" style="color:#009688;">图片宽度和高度至少要达到以上像素才能添加水印</div>
	  </div>
	  
      <div class="layui-form-item imgtr" style="margin-bottom:5px;">
        <label class="layui-form-label">水印图片</label>
        <div class="layui-input-inline default-auto">
          <ul class="layout">
            <li>
            <input name="mark_img" id="mark_img" placeholder="图片地址" value="{$config.mark_img|default=''}" class="layui-input">
            <img id="img_mark_img" src="{$config.mark_img|get_default_pic=###}" class="pcfdisplay">
            </li>
            <li style="margin-top:3px;">
              <div class="layui-btn-group">
                <input type="button" value="上传图片" class="layui-btn layui-btn-sm test-upload-demoMore" lay-data="{number:1,ey_inputId:'mark_img',ey_savepath:'allimg'}">
                <input type="button" value="选择图片" class="layui-btn layui-btn-sm" onClick="GetPictureFolder(1,'mark_img');">
                <input type="button" value="预览" class="layui-btn layui-btn-sm" onclick="BigImages($('#img_mark_img').attr('src'));">
                <input type="button" value="清除" class="layui-btn layui-btn-sm layui-btn-warm" data-inputid="mark_img" onclick="DelImages(this);">
              </div>
            </li>
          </ul>
        </div>
      </div>
	  <div class="layui-form-item imgtr">
	   <label class="layui-form-label"></label>
	   <div class="layui-input-inline auto gray" style="color:#009688;">最佳显示尺寸为240*60像素</div>
	  </div>
	  
      <div class="layui-form-item texttr none">
        <label class="layui-form-label">水印文字</label>
        <div class="layui-input-inline">
          <input type="text" name="mark_txt" value="{$config.mark_txt|default=''}" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item texttr none">
        <label class="layui-form-label">字体大小</label>
        <div class="layui-input-inline">
          <input type="text" name="mark_txt_size" value="{$config.mark_txt_size|default=30}" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item texttr none">
        <label class="layui-form-label">文字颜色</label>
        <div class="layui-input-inline">
          <input type="text" name="mark_txt_color" value="{$config.mark_txt_color|default='#000000'}" id="mark_txt_color" style="border-color: {$config.mark_txt_color|default='#000000'};cursor:pointer;">
        </div>
      </div>
      <div class="layui-form-item" style="margin-bottom:0px;">
        <label class="layui-form-label">水印透明度</label>
        <div class="layui-input-inline">
             <div id="mark_degree2" class="test-slider-demo" style="padding-top:18px;"></div>
             <input type="hidden" name="mark_degree" value="{$config.mark_degree|default='0'}" class="input-txt">
        </div>
      </div>
	  <div class="layui-form-item">
	   <label class="layui-form-label"></label>
	   <div class="layui-input-inline auto gray" style="color:#009688;">0代表完全透明，100代表不透明</div>
	  </div>
	  
      <div class="layui-form-item imgtr" style="margin-bottom:0px;">
        <label class="layui-form-label">JPEG 水印质量</label>
        <div class="layui-input-inline">
          <div id="mark_quality2" class="test-slider-demo" style="padding-top:18px;"></div>
          <input type="hidden" name="mark_quality" value="{$config.mark_quality|default='0'}" class="input-txt">
        </div>
      </div>
	  <div class="layui-form-item imgtr">
	   <label class="layui-form-label"></label>
	   <div class="layui-input-inline auto gray" style="color:#009688;">水印质量请设置为0-100之间的数字，决定 jpg 格式图片的质量</div>
	  </div>
	  
      <div class="layui-form-item">
        <label class="layui-form-label">水印位置</label>
        <div class="layui-input-inline">
            <input type="radio" name="mark_sel" value="1" title="顶部居左" {if condition="isset($config.mark_sel) && $config.mark_sel eq '1'"}checked{/if}>
            <input type="radio" name="mark_sel" value="2" title="顶部居中" {if condition="isset($config.mark_sel) && $config.mark_sel eq '2'"}checked{/if}>
            <input type="radio" name="mark_sel" value="3" title="顶部居右" {if condition="isset($config.mark_sel) && $config.mark_sel eq '3'"}checked{/if}>
            <input type="radio" name="mark_sel" value="4" title="中部居左" {if condition="isset($config.mark_sel) && $config.mark_sel eq '4'"}checked{/if}>
            <input type="radio" name="mark_sel" value="5" title="中部居中" {if condition="isset($config.mark_sel) && $config.mark_sel eq '5'"}checked{/if}>
            <input type="radio" name="mark_sel" value="6" title="中部居右" {if condition="isset($config.mark_sel) && $config.mark_sel eq '6'"}checked{/if}>
            <input type="radio" name="mark_sel" value="7" title="底部居左" {if condition="isset($config.mark_sel) && $config.mark_sel eq '7'"}checked{/if}>
            <input type="radio" name="mark_sel" value="8" title="底部居中" {if condition="isset($config.mark_sel) && $config.mark_sel eq '8'"}checked{/if}>
            <input type="radio" name="mark_sel" value="9" title="底部居右" {if condition="isset($config.mark_sel) && $config.mark_sel eq '9'"}checked{/if}>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="submit-info text-center">
    <button class="layui-btn" lay-submit lay-filter="formSubmit">确认提交</button>
</div>
<div class="pcfclear"></div>
</div>
</div>
{include file="public/footer"/}
<script>
    layui.use(['index','layer', 'form', 'element', 'admin','slider'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            form = layui.form,
            slider = layui.slider;
        element.render();
        var marktype = $('input[name=mark_type]:checked').val();
        setwarter(marktype);
        function setwarter(marktype){
            if(marktype == 'text'){
                $('.texttr').show();
                $('.imgtr').hide();
            }else{
                $('.texttr').hide();
                $('.imgtr').show();
            }
        }
        // 监听开关
        form.on('switch', function(data){
          var elemId = data.elem.attributes['lay-filter']['nodeValue'];
          if (data.elem.checked) {
            this.value = 1;
          } else {
            this.value = 0;
          }
          $("input[name='"+elemId+"']").val(this.value);
        });
        // 监听单选项
        form.on('radio(mark_type)', function(data){
          setwarter(data.value);
        });
        // 颜色选择
        $('#mark_txt_color').colpick({
            flat:false,
            layout:'rgbhex',
            submit:0,
            colorScheme:'light',
            color:$('#mark_txt_color').val(),
            onChange:function(hsb,hex,rgb,el,bySetColor) {
                $(el).css('border-color','#'+hex);
                if(!bySetColor) $(el).val('#'+hex);
            }
        }).keyup(function(){
            $(this).colpickSetColor('#'+this.value);
        });
        // 水印透明度
        slider.render({
            elem: '#mark_degree2',
            value: $('input[name=mark_degree]').val(),
            theme: '#5FB878',//主题色
            change: function(value){
              $('input[name=mark_degree]').val(value)
            }
        });
        // JPEG 水印质量
        slider.render({
            elem: '#mark_quality2',
            value: $('input[name=mark_quality]').val(),
            theme: '#5FB878',//主题色
            change: function(value){
              $('input[name=mark_quality]').val(value)
            }
        });
        //监听提交
        form.on('submit(formSubmit)', function(data){
            layer.msg('正在处理请勿刷新页面', {icon: 16,shade: 0.01,time:3600000});
            $.ajax({
                type : 'post',
                url : "{:url('/system.water/index')}",
                data : data.field,
                dataType : 'json',
                success : function(res){
                    layer.closeAll('loading');
                    if(res.status){
                        layer.msg(res.msg, {icon: 1, time: 1000}, function(){
                            window.location.reload();
                        });
                    }else{
                        layer.msg(res.msg, {icon: 2, time: 1000});
                    }
                },
                error: function(e){
                    layer.closeAll('loading');
                    layer.msg("未知错误，操作中断！", {icon: 2, time: 1000});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>